<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="名称:" label-width="45px" style="width: 600px">
            <el-input v-model="form.name" type="text" />
          </el-form-item>
        </el-col>
        <el-col v-if="isEdit" :span="8">
          <el-form-item label="是否公开:" label-width="90px" style="width: 500px">
            <el-select v-model="form.ispublic" placeholder="请选择此项目是否公开">
              <el-option value="是" />
              <el-option value="否" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="描述:">
        <div>
          <span class="info-span">
            提示: 为避免站内正文浏览格式错误，可以将描述内容与参考文献一同压缩后上传附件
          </span>
          <Tinymce ref="editor" v-model="form.maintext" />
        </div>
      </el-form-item>
      <el-form-item label="附件:">
        <el-upload
          ref="upload"
          :action="'/api/sys/addProject'"
          :limit="limit"
          :auto-upload="false"
          :data="form"
          :on-success="successSubmit"
          accept=".xls, .xlsx, .zip, .pdf, .doc, .png, .jpeg, .jpg, .txt"
          :headers="headers"
        >
          <el-button
            slot="trigger"
            type="info"
            size="small"
          >上传附件</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div>
      <el-button v-if="isEdit===false" type="primary" style="margin-left: 15px; width: 130px" @click="handleSubmit">提交</el-button>
      <el-button v-if="isEdit===true" type="primary" style="margin-left: 15px; width: 130px" @click="handleUpdate">提交</el-button>
      <template>
        <el-popconfirm
          confirm-button-text="返回"
          cancel-button-text="再想想"
          title="返回后将清除所有已编辑的内容并返回项目列表，是否返回?"
          @confirm="backtolist()"
        >
          <el-button slot="reference" style="margin-left: 50px; width: 100px">返回</el-button>
        </el-popconfirm>
      </template>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getToken } from '@/utils/auth'
import { getProInfoById, updateProInfo } from '@/api/project'

// 添加项目的数据对象
const createForm = {
  name: '',
  maintext: '',
  ispublic: '否'
}
// 更新项目信息的数据对象
const updateForm = {
  projid: 0,
  name: '',
  maintext: '',
  ispublic: ''
}
export default {
  name: 'ProDetail',
  components: { Tinymce },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // form: {
      //   name: '',
      //   maintext: '',
      //   ispublic: '否'
      // },
      form: this.isEdit === true ? Object.assign({}, updateForm) : Object.assign({}, createForm),
      limit: 1,
      headers: {
        Authentication: getToken()
      }
    }
  },
  created() {
    // 如果是编辑项目信息，获取路由参数后查询数据
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
  },
  methods: {
    // 获取当前要编辑的项目信息
    fetchData(id) {
      getProInfoById(id).then(res => {
        this.form = res.data
      })
    },
    // 上传
    handleSubmit() {
      this.$refs.upload.submit()
    },
    handleUpdate() {
      const files = this.$refs.upload.uploadFiles
      console.log('upload===' + files.length)
      if (files.length !== 0) {
        this.$refs.upload.submit()
      } else {
        updateProInfo(this.form).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.$router.push('/project/list')
          }
        })
      }
    },
    // 返回项目列表
    backtolist() {
      this.$router.push('/project/list')
    },
    // 成功添加项目后返回结果
    successSubmit() {
      if (this.isEdit) {
        this.$message({
          message: '更新信息成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '新增学生作品成功',
          type: 'success'
        })
      }
      this.$router.push('/project/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.info-span {
  color: rgb(233, 165, 165);
  font-size: 10px;
}
</style>
